<template>
  <div class="color">
    <header>
      <h1>大屏可视化</h1>
    </header>
    <div class="mainArea">
      <div class="left">
        <div ref="Echart" style="width: 400px; height: 300px" class="chartsOne"></div>
        <div ref="Echart2" style="width: 400px; height: 300px" class="chartsOne"></div>

      </div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted () {
    this.init()
    window.addEventListener('resize', this.resizeHandler.bind(this))
    this.init2()
  },

  methods: {
    resizeHandler () {
      this.myChart.resize()
    },
    init () {
      // 创建 echarts 实例并初始化
      const chartDom = this.$refs.Echart
      this.myChart = echarts.init(chartDom)
      const series = [
        {
          data: [200, 300, 300, 900, 1500, 1200, 600],
          type: 'bar',
          stack: 'a'
        }
      ]
      const stackInfo = {}
      for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
          const stackName = series[j].stack
          if (!stackName) {
            continue
          }
          if (!stackInfo[stackName]) {
            stackInfo[stackName] = {
              stackStart: [],
              stackEnd: []
            }
          }
          const info = stackInfo[stackName]
          const data = series[j].data[i]
          if (data && data !== '-') {
            if (info.stackStart[i] == null) {
              info.stackStart[i] = j
            }
            info.stackEnd[i] = j
          }
        }
      }
      for (let i = 0; i < series.length; ++i) {
        const data = series[i].data
        const info = stackInfo[series[i].stack]
        for (let j = 0; j < series[i].data.length; ++j) {
          // const isStart = info.stackStart[j] === i;
          const isEnd = info.stackEnd[j] === i
          const topBorder = isEnd ? 10 : 0
          const bottomBorder = 0
          data[j] = {
            value: data[j],
            itemStyle: {
              borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
            }
          }
        }
      }
      const option = {
        title: {
          left: 'center',
          text: '柱状图-就业行业 2019 2020',
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          // 触发方式
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [
            '旅游行业',
            '教育培训',
            '游戏行业',
            '医疗行业',
            '电商行业',
            '社交行业',
            '金融行业'
          ]
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: 'white'
          }
        },
        series: series
      }

      this.myChart.setOption(option)
    },
    init2 () {
      // 创建 echarts 实例并初始化
      const chartDom2 = this.$refs.Echart2
      this.myChart2 = echarts.init(chartDom2)
      const series = [
        {
          data: [200, 300, 300, 900, 1500, 1200, 600],
          type: 'line',
          stack: 'a'
        },
        {
          data: [100, 150, 300, 400, 1500, 1000, 600],
          type: 'line',
          stack: 'a'
        }
      ]
      const option = {
        title: {
          left: 'center',
          text: '柱状图-就业行业 2019 2020',
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          // 触发方式
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [
            '旅游行业',
            '教育培训',
            '游戏行业',
            '医疗行业',
            '电商行业',
            '社交行业',
            '金融行业'
          ]
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: 'white'
          }
        },
        series: series
      }

      this.myChart2.setOption(option)
    },
    beforeDestroy () {
      window.removeEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style scoped>
.color {
  background-color: white;
  height: 100%;
}
header {
  width: 100%;
  height: 80px;
  background: url('../assets/images/head_bg.png');
  background-size: 100% 100%;
}
h1 {
  font-size: 45px;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
}
.mainArea {
  width: 100%;
  height: 100%;
  background: url('../assets/images/bg.jpg');
  background-size: 100% 100%;
}
.left {
  width: 25%;
  height: 100%;
  float: left;
}
.middle {
  width: 50%;
  height: 100%;
  float: left;
}
.right {
  width: 25%;
  height: 100%;
  float: left;
}
.chartsOne{
  margin-top: 10px;;
}
</style>
